<template>
    <el-dialog
        :close-on-click-modal="false"
        :visible="isShowAddNumDialog"
        :title="title"
        width="600px"
        @close="$emit('close')"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="120px"
        >
          <el-form-item label="参数:" prop="name">
            <span>{{  info.name }}</span>
          </el-form-item>
          <el-form-item label="类别:" prop="category">
            <span>{{  info.category }}</span>
          </el-form-item>
          <el-form-item label="编号:" prop="number">
            <span>{{  info.number }}</span>
          </el-form-item>
          <el-form-item label="批号" prop="batchNumber">
            <el-input v-model="form.batchNumber" style="width: 370px" />
          </el-form-item>
          <!-- <el-form-item label="批号:" prop="batchNumber">
            <span>{{  info.batchNumber }}</span>
          </el-form-item> -->
          <el-form-item label="成分:" prop="ingredientData">
            <el-table
              :data="info.ingredientData"
              style="width: 100%"
            >
              <el-table-column prop="ingredientName" label="成分名称"/>
              <el-table-column prop="value" label="标准值" align="center"/>
              <el-table-column
                prop="uncertainty"
                label="不确定度"
                align="center"
              >
                <template slot-scope="scope">
                    <span>± {{ scope.row.uncertainty  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="ingredientUnit"
                label="标准值单位"
                align="center"
             />
            </el-table>
          </el-form-item>
          <el-form-item label="基体(V/V):" prop="matrix">
            <span>{{  info.matrix }}</span>
          </el-form-item>
          <div style="display: flex; align-items: center;">
            <el-form-item label="数量:" prop="amount">
              <el-input v-model="form.amount" style="width: 355px" />
              <span>{{  info.unit==1 ?' 支' : '瓶' }}</span>
            </el-form-item>
          </div>
          <el-form-item v-if="info.unit == 2" label="规格:" prop="capacity">
            <span>{{  info.capacity }} mL</span>
          </el-form-item>
          <el-form-item label="有效期" prop="expirationDate">
            <el-date-picker
              style="width: 370px"
              v-model="form.expirationDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择有效期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="冰箱" prop="cabinetId">
            <el-select
              v-model="form.cabinetId"
              style="width: 370px"
              clearable
              filterable
              placeholder="请选择冰箱"
            >
              <el-option
                v-for="item in refrigeratorOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="有效期:" prop="expirationDate">
            <span>{{info.expirationDate}}</span>
          </el-form-item> -->
          <!-- <el-form-item label="冰箱:" prop="cabinetId">
            <span>{{info.cabinetName}}</span>
          </el-form-item> -->
          <el-form-item
            label="是否审批:"
            prop="isAudit"
          >
          <span>{{ info.isAudit == 0 ? "否" : "是" }}</span>
          </el-form-item>
          <el-form-item label="稀释方法:">
            <span>{{ info.attenuation  || '无' }}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ info.notes  || '无' }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="$emit('close')">取消</el-button>
          <el-button
            type="primary"
            @click="addNum"
            >确认</el-button
          >
        </div>
      </el-dialog>
</template>

<script>
import { getRefrigeratorListAPI } from "@/api/refrigerator";
import { warehousingAPI} from '@/api/hazardousChemicals'
export default {
  props:{
    info:{
      type:Object,
      default: {}
    },
    isShowAddNumDialog:{
      type:Boolean,
      default:false
    }
  },
  data () {
    let limtAmount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("数量不能为空"));
      } else if (!(parseInt(value) === parseFloat(value))) {
        return callback(new Error("数量只能为整数"));
      }
      callback();
    };
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      form:{
        amount:'',
        batchNumber: this.info.batchNumber,
        expirationDate: this.info.expirationDate,
        cabinetId: this.info.cabinetId,
      },
      rules:{
        amount: [{ required: true, trigger: "blur", validator: limtAmount }],
        batchNumber: [ { required: true, message: "批号不能为空", trigger: "blur" }, ],
        expirationDate: [ { required: true, message: "有效期不能为空", trigger: "change" }, ],
        cabinetId: [ { required: true, message: "冰箱不能为空", trigger: "change" },],
      },
      title: this.info.name + '- 入库',
      refrigeratorOptions: [],
    }
  },

  created () {
    this.getRefrigerator()
  },

  methods: {
    addNum(){
      this.$refs.form.validate(async (valid)=>{
       if(!valid) return
       try {
         await warehousingAPI({
        id: this.info.id,
        amount: this.form.amount,
        batchNumber: this.form.batchNumber,
        expirationDate: this.form.expirationDate,
        cabinetId: this.form.cabinetId,
      })
      this.$message.success('入库成功')
       } catch (error) {
        this.$message.error('入库失败')
       }finally{
        this.$emit('close')
        this.$emit('refresh')
       }
      })

    },
    async getRefrigerator(){
      const res  = await getRefrigeratorListAPI()
      this.refrigeratorOptions = res
    },
  }
}
</script>

<style scoped>

</style>
